<template>
  <div class="password-con">
    <form>
      <div class="phone">
        <input type="text" placeholder="请输入手机号" v-model.trim="phoneNum" @blur="isOk" @input="changeUser" :class="{'input-error':isSucceed == false||haveUser===false}">
        <p class="isSucceed" v-show="isSucceed===false">请输入正确的手机号</p>
        <p class="isSucceed" v-show="haveUser===false">用户名不存在</p>
      </div>
      <div class="code">
        <input type="password" placeholder="请输入密码" v-model.trim="password" @input="isOkPsw" :class="{'input-error':isPswSucceed == false}">
        <p class="isSucceed" v-show="isPswSucceed===false">密码不少于6位并且以字母开头</p>
        <p class="isSucceed" v-show="pswOk===false">用户名或者密码错误</p>
      </div>
    </form>
    <!-- 登入按钮 -->
    <button class="login" :disabled="!(isSucceed===true&&isPswSucceed===true)" :class="{'error-button':!(isSucceed===true&&isPswSucceed===true)}" @click="login">
      登入
    </button>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'PassWord',
  data() {
    return {
      phoneNum: '',
      password: '',
      // 收集手机号码表单验证后的结果
      isSucceed: null,
      // 收集验证码表单验证的结果
      isPswSucceed: null,
      // 用户名是否存在
      haveUser: null,
      // 用户登入密码是否正确
      pswOk: null
    }
  },
  methods: {
    isOk(e) {
      const value = e.target.value
      this.validate(value, 1)
    },
    isOkPsw(e) {
      const value = e.target.value
      this.validate(value, 2)
      this.pswOk = true
    },
    changeUser() {
      this.haveUser = true
    },
    // 表单验证   val 是判断要验证的值 num 是要判断的类型
    validate(val, num) {
      let zzbds
      if (num === 1) {
        zzbds = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
        this.isSucceed = zzbds.test(val)
      } else {
        zzbds = /^[a-zA-Z]\w{5,17}$/
        this.isPswSucceed = zzbds.test(val)
      }
    },
    setCode() {
      this.isSet = false
    },
    // 登入
    async login() {
      const { phoneNum, password } = this
      const user = {}
      user.phoneNum = phoneNum
      user.password = password
      const res = await this.$store.dispatch('login', user)
      if (res) {
        this.$router.push('/')
      }
      this.haveUser = this.hasUser
      this.pswOk = this.userOk
      if (this.haveUser === false || this.pswOk === false) {
        this.password = ''
      }
    }
  },
  computed: {
    ...mapState(['hasUser', 'userOk'])
  }
}
</script>

<style lang='less' scoped>
.password-con {
  font-size: 28px;
  form {
    width: 460px;
    margin: 0 auto;
    div {
      position: relative;
      .isSucceed {
        position: absolute;
        bottom: 0;
        padding-left: 20px;
        color: red;
      }
    }
    input {
      width: 100%;
      height: 80px;
      background-color: #f0f0f0;
      margin-bottom: 35px;
      border-radius: 25px;
      border: 1px solid #f0f0f0;
      padding-left: 25px;
    }
    .input-error {
      border: 1px solid red;
    }
    .code {
      .set {
        position: absolute;
        right: 25px;
        top: 15%;
        width: 150px;
        border: 0;
        color: #1789fe;
        font-weight: 700;
        button {
          border: 0;
        }
      }
      .van-count-down {
        color: #1789fe;
        font-size: 28px;
        margin-top: 12px;
      }
      .color-error {
        color: #b7b7b7;
      }
    }
  }
  .login {
    display: block;
    width: 460px;
    height: 70px;
    text-align: center;
    line-height: 70px;
    color: #fff;
    background-color: #1789fe;
    margin: 0 auto;
    border-radius: 35px;
    outline: none;
    border: 0;
  }
  .error-button {
    background-color: #b5daff;
  }
}
</style>
